<template>
    <div>
        <el-form :model="topoElementData" :ref="topoElementData">
            <el-form-item label="编号" :label-width="labelWidth">
                <el-input v-model="topoElementData.hostid" auto-complete="off" size="small" disabled></el-input>
            </el-form-item>
            <el-form-item label="可见名称" :label-width="labelWidth">
                <el-input v-model="topoElementData.name" auto-complete="off" size="small" disabled></el-input>
            </el-form-item>
            <el-form-item label="名称（IP）" :label-width="labelWidth">
                <el-input v-model="topoElementData.host" auto-complete="off" size="small" disabled></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<<script>
import topoApi from 'api/topo'
export default {
    props: {
        currentMapElementData: {
            style: Object,
            default: function() {
                return {}
            }
        }
    },
    data() {
        return {
            labelWidth: '100px',
            topoElementData: {
                hostid: '',
                name: '',
                host: ''
            }
        }
    },
    mounted() {
        this.queryHost();
    },
    methods: {
        queryHost() {
            const self = this;
            if (!this.isObjBlank(this.currentMapElementData) && 
                !this.isObjBlank(this.currentMapElementData.elementid) &&
                this.currentMapElementData.elementtype == 0) {
                topoApi.queryHostById(this.currentMapElementData.elementid, function(response) {
                    self.topoElementData = response;
                });

                // topoApi.queryHostById(this.currentMapElementData.elementid).then(response => {
                //     self.topoElementData = response.data;
                // }).catch(err=> {
                //     console.log('topo query host by id, err=', err);
                // });
            }
            
        },
        isObjBlank(obj) {
            return (obj === null) || (obj === undefined) || (obj === '');
        },
    },
    watch: {
        currentMapElementData: function(newValue, oldValue) {
            if (newValue != oldValue) {
                this.queryHost();
            }
        }
    }
}
</script>
